<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    用户名： <input type="text" id="input" /><br />
    密码: <input type="password" id="password" />
    <button type="button" disabled>提交</button>
    <p></p>
    <script>
      let input = document.querySelector("#input");
      let password = document.querySelector("#password");
      const button = document.querySelector("button");
      const p = document.querySelector("p");
      let textflag = false;
      let passwordflag = false;
      let reg = /^[a-zA-Z0-9_-]{4,16}$/;
      let reg1 = /^[a-zA-Z0-9_]{8,15}$/;
      input.onblur = function () {
        textflag = reg.test(this.value);
        if (reg.test(this.value)) {
          button.disabled = true;
        }
        flag();
      };
      password.onblur = function () {
        passwordflag = reg1.test(this.value);
        if (!reg1.test(this.value)) {
          button.disabled = true;
        }
        flag();
      };
      function flag() {
        button.disabled = !(textflag && passwordflag);
      }
      button.onclick = async function () {
        try {
          const { data } = await axios.get("http://localhost:3000/name", {
            params: {
              name: input.value,
              password: password.value,
            },
          });
          console.log(data);
          p.innerHTML = data.success;
        } catch (error) {
          console.log(error);
        }
      };
    </script>
  </body>
</html>
